<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商城</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <style>
        .category {
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
        }

        .active {
            color: #FDA347;
        }

        .categoryItem {
            margin-left: 0.5rem;
            padding: 1rem;
        }

        .goodsImgDiv {
            padding: 0.3rem;
        }

        .goodsImg {
            height: 3.5rem;
            width: 3.5rem;
        }

        .goodsItem {
            display: flex;
            flex-direction: row;
            margin-top: 0.1rem;
            background: rgba(255, 255, 255, 1);
            border-top: 0.01rem solid rgba(238, 238, 238, 1);
        }

        .goodsInfo {
            display: flex;
            flex-direction: column;
            margin-left: 1rem;
        }

        .indexPrice {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            height: 1rem;
            width: 13rem;
            margin-top: 1rem;
        }

        .indexPrice .salePrice {
            font-size: 0.8rem;
            font-family: MicrosoftYaHei;
            color: rgba(231, 37, 16, 1);
        }

        .indexPrice .orgPrice {
            font-size: 0.6rem;
            font-family: MicrosoftYaHei;
            color: rgba(153, 153, 153, 1);
        }
    </style>
</head>

<body>
<!-- 你的html代码 -->
<div class="page">
    <!--<header class="bar bar-nav">
        <a class="button button-link button-nav pull-left" data-transition='slide-out'>
            <span class="icon icon-left"></span>
            返回
        </a>
        <h1 class="title">分类</h1>
    </header>-->
    <nav class="bar bar-tab">
        <a class="tab-item" href="./index.html">
            <span class="icon icon-home"></span>
            <span class="tab-label">首页</span>
        </a>
        <a class="tab-item  active" href="./category.html">
            <span class="icon icon-menu"></span>
            <span class="tab-label">分类</span>
        </a>
        <a class="tab-item" href="./cart.html">
            <span class="icon icon-cart"></span>
            <span class="tab-label">购物车</span>
        </a>
        <a class="tab-item" href="./personal.html">
            <span class="icon icon-me"></span>
            <span class="tab-label">个人</span>
        </a>
    </nav>
    <!-- 这里是页面内容区 -->
    <div class="content">
        <div id="category-container" class="category">
            <span class="categoryItem active" onclick="changeCategory(this);">全部商品</span>
            <span class="categoryItem" onclick="changeCategory(this);">分类分类</span>
            <span class="categoryItem">分类分类</span>
            <span class="categoryItem">分类分类</span>
            <span class="categoryItem">分类分类</span>
        </div>
        <div id="goods-container">
            <div class="goodsItem">
                <div class="goodsImgDiv">
                    <img class="goodsImg"
                         src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg"
                         alt=""/>
                </div>
                <div class="goodsInfo">
                    <div class="goodsName">信息</div>
                    <div class="indexPrice">
                        <span class="salePrice">￥299.00</span>
                        <span class="orgPrice">￥168.00</span>
                    </div>
                </div>
            </div>
            <div class="goodsItem">
                <div class="goodsImgDiv">
                    <img class="goodsImg"
                         src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg"
                         alt=""/>
                </div>
                <div class="goodsInfo">
                    <div class="goodsName">信息</div>
                    <div class="indexPrice">
                        <span class="salePrice">￥299.00</span>
                        <span class="orgPrice">￥168.00</span>
                    </div>
                </div>
            </div>
            <div class="goodsItem">
                <div class="goodsImgDiv">
                    <img class="goodsImg"
                         src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg"
                         alt=""/>
                </div>
                <div class="goodsInfo">
                    <div class="goodsName">信息</div>
                    <div class="indexPrice">
                        <span class="salePrice">￥299.00</span>
                        <span class="orgPrice">￥168.00</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script src="./js/index.js"></script>
</body>
<script>
    $(function () {
        getCatergory("1009372512464801792");
        getGoodsList("1009372512464801792", "-1");
    });

    function changeCategory(obj, categoryId) {
        $(".categoryItem").each(function (index, item) {
            $(this).removeClass("active");
        });
        $(obj).addClass("active");
        getGoodsList("1009372512464801792", categoryId);
    }

    function getCatergory(shopId) {
        $.getJSON(prefix + "/categoryInfo/api/getCategory/" + shopId, function (data) {
            var categoryHtml =
                '<span class="categoryItem active" onclick="changeCategory(this,\'-1\')">全部商品</span>';
            if (data.code == 0) {
                $.each(data.data, function (index, item) {
                    categoryHtml += '<span class="categoryItem" onclick="changeCategory(this,\'' + item
                        .flId + '\')">' + item
                        .flName + '</span>';
                });
                $("#category-container").html(categoryHtml);
            }
        });
    }

    function getGoodsList(shopId, categoryId) {
        $.getJSON(prefix + "/goodsInfo/api/getGoodsByCategory/" + shopId + "/" + categoryId, function (data) {
            var goodsHtml = "";
            var goodsList = data.data;
            $.each(goodsList, function (index, item) {
                goodsHtml += '<div class="goodsItem" onclick="jumpGoodsDetail(\'' + item.flId + '\')">' +
                    '<div class="goodsImgDiv">' +
                    '<img class="goodsImg" src="' + item.flThumbnailPic + '"/>' +
                    '</div>' +
                    '<div class="goodsInfo">' +
                    '<div class="goodsName">' + item.flName + '</div>' +
                    '<div class="indexPrice">' +
                    '<span class="salePrice">￥' + item.flSalePrice + '</span>' +
                    '<span class="orgPrice">￥' + item.flOriginalPrice + '</span>' +
                    '</div>' +
                    '</div>' +
                    '</div>';
            });
            $("#goods-container").html(goodsHtml);

        });
    }

    function jumpGoodsDetail(goodsId) {
        // alert(goodsId);
        window.location.href = "./goodsDetail.html?goodsId=" + goodsId;
    }
</script>

</html>
